<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a="http://richfaces.org/a4j" xmlns:a4j="http://richfaces.org/a4j"
	template="/layout/template_box.xhtml">

	<ui:define name="head">

		<script>
	    function mascarar(){
	      
            jQuery(".telefone").unmask().mask('9999-9999');            
            jQuery(".cep").unmask().mask('99.999-999');
            jQuery(".cpf").unmask().mask('999.999.999-99');
           
            jQuery(".rich-calendar-input").unmask().mask('99/99/9999');
        }

		jQuery(function(){
            mascarar();
		});
		function isDayEnabled(day){	
			   var data = new Date(day.date);
			   var hoje= new Date();
			   hoje.setFullYear(hoje.getFullYear()-18);
			   return data &lt;= hoje;
				   		   
			}
			function getDisabledStyle(day){
			   if (!isDayEnabled(day)) return 'rich-calendar-boundary-dates disabledDay';
			}
    </script>


	</ui:define>

	<ui:define name="MenuInterno">
		<ui:include src="/layout/menu_voluntario.xhtml" />
	</ui:define>

	<ui:define name="body">

		<h2 class="t_curso">
			<h:outputText value="Cadastro de Voluntário" />
		</h2>

		<div id="tamanho_div">

			<a:outputPanel id="pnlForm" ajaxRendered="true">
				<a:form id="formVoluntarioHome" styleClass="form_confea">
					<s:validateAll>

						<ol>

							<li><s:div>
									<p class="tool_alerta">Os campos marcados com * são de
										preenchimento obrigatório.</p>
								</s:div></li>
							<li>
								<fieldset>
									<legend>
										<h:outputText value="Dados do Voluntário" />
									</legend>
								</fieldset>
							</li>


							<li><s:decorate template="/layout/edit.xhtml" id="decoNome">
									<ui:define name="label">
							Nome
						</ui:define>
									<h:inputText id="nome" required="true"
										requiredMessage="O campo 'Nome' é obrigatório"
										styleClass="campo_full"
										value="#{voluntarioHome.instance.nome}" />

								</s:decorate></li>


							<li><s:decorate template="/layout/edit.xhtml" id="decoFone">
									<ui:define name="label">
							Telefone
						</ui:define>
									<h:inputText id="fone" required="false"
										requiredMessage="O campo 'Telefone' é obrigatório"
										styleClass="campo_full telefone"
										value="#{voluntarioHome.instance.telefone}" />

								</s:decorate></li>

							<li><s:decorate template="/layout/edit.xhtml" id="decoCel">
									<ui:define name="label">
							Celular
						</ui:define>
									<h:inputText id="cel" required="false"
										requiredMessage="O campo 'Celular' é obrigatório"
										styleClass="campo_full telefone"
										value="#{voluntarioHome.instance.celular}" />

								</s:decorate></li>

							<li><s:decorate template="/layout/edit.xhtml"
									id="decoNascimento">
									<ui:define name="label">
							Nascimento
						</ui:define>

									<rich:calendar id="nascimento" styleClass="campo_half data"
										value="#{voluntarioHome.instance.nascimento}"
										datePattern="dd/MM/yyyy" disabled="false" required="true"
										rendered="true"
										requiredMessage="O campo 'Nascimento' é obrigatório."
										enableManualInput="true"
										isDayEnabled="isDayEnabled" 
										dayStyleClass="getDisabledStyle"
										locale="pt"
										style="position: static;margin-left: 150px;">
										<f:validator validatorId="DataValidator" />
									</rich:calendar>

								</s:decorate></li>

							<li><s:decorate template="/layout/edit.xhtml" id="decoEmail">
									<ui:define name="label">
							E-mail
						</ui:define>
									<h:inputText id="cel" required="false"
										requiredMessage="O campo 'E-mail' é obrigatório"
										styleClass="campo_full"
										value="#{voluntarioHome.instance.email}" />
								</s:decorate></li>

							<li><s:decorate template="/layout/edit.xhtml" id="decoRG">
									<ui:define name="label">
							RG
						</ui:define>
									<h:inputText id="rg" required="false"
										requiredMessage="O campo 'RG' é obrigatório"
										styleClass="campo_full" value="#{voluntarioHome.instance.rg}" />

								</s:decorate></li>

							<li><s:decorate template="/layout/edit.xhtml" id="decoCpf">
									<ui:define name="label">
							CPF
						</ui:define>
									<h:inputText id="cpf" required="false"
										requiredMessage="O campo 'E-mail' é obrigatório"
										styleClass="campo_full cpf"
										value="#{voluntarioHome.instance.cpf}"
										converter="conversorCPF" />

								</s:decorate></li>

							<li><s:decorate template="/layout/edit.xhtml"
									id="decoEndereco">
									<ui:define name="label">
							Endereço
						</ui:define>
									<h:inputText id="endereco" required="false"
										requiredMessage="O campo 'Endereço' é obrigatório"
										styleClass="campo_full"
										value="#{voluntarioHome.instance.endereco}" />

								</s:decorate></li>


							<li><s:decorate template="/layout/edit.xhtml"
									id="decoBairro">
									<ui:define name="label">
							Bairro
						</ui:define>
									<h:inputText id="bairro" required="false"
										requiredMessage="O campo 'Bairro' é obrigatório"
										styleClass="campo_full"
										value="#{voluntarioHome.instance.bairro}" />

								</s:decorate></li>

							<li><s:decorate template="/layout/edit.xhtml" id="decoCep">
									<ui:define name="label">
							CEP
						</ui:define>
									<h:inputText id="cep" required="false"
										requiredMessage="O campo 'CEP' é obrigatório"
										styleClass="campo_full cep"
										value="#{voluntarioHome.instance.cep}"
										converter="conversorCEP" />

								</s:decorate></li>


							<li><s:decorate template="/layout/edit.xhtml" id="decoCidade">
						<ui:define name="label">
							Cidade
						</ui:define>
						<h:selectOneMenu
										requiredMessage="O campo 'Cidade' é obrigatório."
										required="true"
										id="cidade" styleClass="Combo"
										value="#{voluntarioHome.instance.cidade}">
										<s:selectItems value="#{factories.cidades}" var="cidade"
											label="#{cidade.nome}" noSelectionLabel="Selecione" />
										<s:convertEntity />
									</h:selectOneMenu>
						
					</s:decorate></li>

							<li class=""><s:decorate template="/layout/edit.xhtml"
									id="decoSexo">
									<ui:define name="label">
							Sexo
						</ui:define>

									<h:selectOneRadio layout="pageDirection" id="sexo"
										value="#{voluntarioHome.instance.sexo}" required="true"
										requiredMessage="O campo 'Sexo' é obrigatório">
										<s:selectItems value="#{factories.sexos}" var="sexo"
											label="#{sexo.nome}" />
										<s:convertEnum />
									</h:selectOneRadio>

								</s:decorate></li>

							<li>
								<fieldset>
									<legend>
										<h:outputText value="Dados do Curso" />
									</legend>
								</fieldset>
							</li>

						<li><s:decorate template="/layout/edit.xhtml" id="decoInterno">
									<ui:define name="label">
							Interno
						</ui:define>
									<h:selectBooleanCheckbox id="interno" value="#{voluntarioHome.instance.interno}"  required="false" requiredMessage="O campo 'Interno' é obrigatório">
										<a4j:support event="onchange" ajaxSingle="true" limitToList="true" eventsQueue="default" reRender="decoInstituicao,decoCurso,decoSemestre,decoMatricula" />
									</h:selectBooleanCheckbox>

								</s:decorate></li>

							<li><s:decorate template="/layout/edit.xhtml" id="decoInstituicao">
									<ui:define name="label">
							Instituição
						</ui:define>
									<h:inputText id="instituicao" required="#{voluntarioHome.instance.interno}"
										requiredMessage="O campo 'Instituição' é obrigatório"
										styleClass="campo_full "
										value="#{voluntarioHome.instance.instituicao}" />

								</s:decorate></li>			

							<li><s:decorate template="/layout/edit.xhtml" id="decoCurso">
									<ui:define name="label">
							Curso
						</ui:define>
									<h:inputText id="curso" required="#{voluntarioHome.instance.interno}"
										requiredMessage="O campo 'Curso' é obrigatório"
										styleClass="campo_full "
										value="#{voluntarioHome.instance.curso}" />

								</s:decorate></li>
							<li><s:decorate template="/layout/edit.xhtml"
									id="decoSemestre">
									<ui:define name="label">
							Semestre
						</ui:define>
									<h:inputText id="semestre" required="#{voluntarioHome.instance.interno}"
										requiredMessage="O campo 'Semestre' é obrigatório"
										styleClass="campo_full numero"
										value="#{voluntarioHome.instance.semestre}">
										
									</h:inputText>

								</s:decorate></li>
<li><s:decorate template="/layout/edit.xhtml" id="decoMatricula">
									<ui:define name="label">
							Matrícula
						</ui:define>
									<h:inputText id="matricula" required="#{voluntarioHome.instance.interno}"
										requiredMessage="O campo 'Matrícula' é obrigatório"
										styleClass="campo_full "
										value="#{voluntarioHome.instance.matricula}" />

								</s:decorate></li>

											
								
								
								<li><s:div style="position:relative">
						            <s:decorate template="/layout/edit.xhtml" id="decoAreaInteresse">
						              <ui:define name="label">
						                Area de Interesse
						              </ui:define>
						              <s:div>
						                <h:selectManyCheckbox value="#{voluntarioHome.instance.areasInteresse}" required="true"
						                  styleClass="conhecimento" layout="pageDirection">
						                  <s:selectItems value="#{factories.areasInteresse}" var="area"
												label="#{area.nome}"  />
						                  <s:convertEnum/>
						                  
						                </h:selectManyCheckbox>
						              </s:div>
						            </s:decorate>
						
						          </s:div></li>
          
								
									<li><s:div style="position:relative">
						            <s:decorate template="/layout/edit.xhtml" id="decoDisponibilidade">
						              <ui:define name="label">
						                Disponibilidade
						              </ui:define>
						              <s:div>
						               <h:selectManyCheckbox
											requiredMessage="O campo 'Disponibilidade' é obrigatório."
											required="true" id="disponibilidade"
											value="#{voluntarioHome.instance.turnos}"
											 styleClass="conhecimento" layout="pageDirection">
											 
											<s:selectItems value="#{factories.turnos}" var="disp"
												label="#{disp.nome}"  />
											<s:convertEnum />
											
										</h:selectManyCheckbox>
						              </s:div>
						            </s:decorate>
						
						          </s:div></li>
								
								<li><s:div style="position:relative">
						            <s:decorate template="/layout/edit.xhtml" id="decoHoras">
						              <ui:define name="label">
						                Horas disponíveis
						              </ui:define>
						              <s:div>
						               <h:selectOneRadio
											requiredMessage="O campo 'Horas disponíveis' é obrigatório."
											required="true" id="horas"
											value="#{voluntarioHome.instance.horasDisponiveis}"
											 styleClass="conhecimento" layout="pageDirection">
											 
											<s:selectItems value="#{factories.horasDisponiveis}" var="hora"
												label="#{hora.nome}"  />
											<s:convertEnum />
											
										</h:selectOneRadio>
						              </s:div>
						            </s:decorate>
						
						          </s:div></li>
								
								
									<li>
								<fieldset>
									<legend>
										<h:outputText value="Experiência do Voluntário" />
									</legend>
								</fieldset>
							</li>
							
									<li>
									<s:div styleClass="divcheckbox">

										<h:selectBooleanCheckbox
											requiredMessage="O campo 'Horas disponíveis' é obrigatório."
											required="false" id="javoluntario"
											value="#{voluntarioHome.instance.foiVoluntario}">
												<a4j:support event="onchange" ajaxSingle="true" limitToList="true" eventsQueue="default" 
												reRender="decoAreaVoluntario,decoDuracaoExperiencia" />
										
										</h:selectBooleanCheckbox>
										Já exerceu alguma atividade de voluntariado?
									</s:div>

								</li>
								
									<li><s:decorate template="/layout/edit.xhtml" id="decoAreaVoluntario">
									<ui:define name="label">
							Area de Experiência
						</ui:define>
									<h:inputText id="areaVoluntario" required="#{voluntarioHome.instance.foiVoluntario}"
										requiredMessage="O campo 'Area de Experiência' é obrigatório"
										styleClass="campo_full"
										value="#{voluntarioHome.instance.areaExperiencia}" />

								</s:decorate></li>
								
									<li><s:decorate template="/layout/edit.xhtml" id="decoDuracaoExperiencia">
									<ui:define name="label">
							Duração da Experiência
						</ui:define>
									<h:inputText id="duracaoExperiencia" required="#{voluntarioHome.instance.foiVoluntario}"
										requiredMessage="O campo 'Duração da Experiência' é obrigatório"
										styleClass="campo_full"
										value="#{voluntarioHome.instance.duracaoExperiencia}" />

								</s:decorate></li>


						<li><s:decorate template="/layout/edit.xhtml"
									id="decoDesligamento">
									<ui:define name="label">
							Data de desligamento
						</ui:define>

									<rich:calendar id="desligamento" styleClass="campo_half data"
										value="#{voluntarioHome.instance.dataDesligamento}"
										datePattern="dd/MM/yyyy" disabled="false" required="true"
										rendered="true"
										requiredMessage="O campo 'Data de desligamento' é obrigatório."
										enableManualInput="true"
										locale="pt"
										style="position: static;margin-left: 150px;">
										<f:validator validatorId="DataValidator" />
									</rich:calendar>

								</s:decorate></li>
								
								
								<li><s:decorate template="/layout/edit.xhtml" id="decoCertificado">
									<ui:define name="label">
							Certificado emitido
						</ui:define>
									<h:selectBooleanCheckbox id="certificado" value="#{voluntarioHome.instance.certificadoEmitido}"  required="true" requiredMessage="O campo 'Certificado Emitido' é obrigatório"/>

								</s:decorate></li>


	<li>
								<fieldset>
									<legend>
										<h:outputText value="Motivação" />
									</legend>
								</fieldset>
							</li>

	<li>
									<s:decorate template="/layout/edit.xhtml" id="decoMotivacao">
										<ui:define name="label">Movito</ui:define>
										<h:inputTextarea
											requiredMessage="O campo 'Motivação' é obrigatório."
											required="false"
											id="motivacao" styleClass="campo_full"
											value="#{voluntarioHome.instance.motivacao}">
											<rich:jQuery selector="#motivacao" query="charCounter(1000,{mostrar:false})" timing="onload" />
										</h:inputTextarea>
									</s:decorate>
								</li>
								
								
								

	<li>
								<fieldset>
									<legend>
										<h:outputText value="Comentários" />
									</legend>
								</fieldset>
							</li>

	<li>
									<s:decorate template="/layout/edit.xhtml" id="decoComentario">
										<ui:define name="label">Comentários</ui:define>
										<h:inputTextarea
											requiredMessage="O campo 'Comentários' é obrigatório."
											required="false"
											id="comentario" styleClass="campo_full"
											value="#{voluntarioHome.instance.descricao}">
											<rich:jQuery selector="#comentario" query="charCounter(1000,{mostrar:false})" timing="onload" />
										</h:inputTextarea>
									</s:decorate>
								</li>

						</ol>

						<fieldset>
							<h:messages globalOnly="false" styleClass="tool_alerta" />
						</fieldset>

						<a4j:commandLink styleClass="btn"
							action="#{voluntarioHome.salvar}" value="Salvar" oncomplete="mascarar()"
							reRender="pnlForm" />

					</s:validateAll>
				</a:form>
			</a:outputPanel>
		</div>
	</ui:define>

</ui:composition>
